import Taro, {Component} from '@tarojs/taro'
import { AtCard,AtInput,AtButton ,AtMessage   } from "taro-ui"
import {View} from "@tarojs/components"
import {redirectWithAuth, toast,showErrorMsg} from "../../../utils";
import {queryClassAndJoin} from './service'
import './index.scss'

export default class Index extends Component {
  config = {
    navigationBarTitleText: '加入班级'
  };
    constructor(props) {
        super(props);
        this.state = {
          schoolName:'',
          classKey:''
        }
    }
    handleChange (key,value) {
    this.setState({
      [key]:value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }
  checkInput(){
      const {schoolName,classKey} = this.state
      if(schoolName===''){
        showErrorMsg('学校名不能为空')
        return false
      }
      if(classKey===''){
        showErrorMsg('班级密钥不能为空')
        return false
      }
    return true
  }

  searchAndJoinClass(){
  if(this.checkInput()){
    queryClassAndJoin(this.state.classKey,this.state.schoolName)
  }
  }


    render() {

        return (
            <View>
              <AtCard
                note='*必填'
                title='学校名称'
              >
                <AtInput
                  name='schoolName'
                  type='text'
                  focus={true}
                  value={this.state.schoolName}
                  onChange={this.handleChange.bind(this,'schoolName')}
                />
              </AtCard>
              <AtCard
                note='*必填'
                title='班级密钥'
              >
                <AtInput
                  name='classKey'
                  type='text'
                  focus={true}
                  value={this.state.classKey}
                  onChange={this.handleChange.bind(this,'classKey')}
                />
              </AtCard>

              <AtButton
                type='primary'
                className="button_bottom"
                onClick={this.searchAndJoinClass.bind(this)}
              >搜索并加入班级</AtButton>
              <AtMessage />
            </View>
        )
    }

}
